<template>
  <div class="home">
    13-1
      <h2>一辆{{car.brand}}车,价值{{car.price}}万</h2>
      <button @click="changePrice">修改汽车的价格</button>
      <h2>游戏列表</h2>
      <ul>
          <li v-for="g in games" :key="g.id">{{g.name}}</li>
      </ul>
      <button @click="changeFirstGame">修改第一个游戏名字</button>
      <p>{{ cname }}</p>
      <button @click="changeCname">修改名字</button>
  </div>
</template>


<script setup lang="ts" name = "Page13">
import { ref,reactive,readonly } from 'vue';
let name =ref("4114")
console.log(name)
 let cname=reactive(name)
function changeCname(){
  cname.value+='~'
  // nname.value+='~'
}

let car =  ref({brand:'奔驰',price:100}) // readonly
console.log('1',car)
 function changePrice() {
  car.value.price +=10
 }

 let games = ref([
  {id:'10001',name:'王者荣耀'},
  {id:'10002',name:'原神'},
  {id:'10003',name:'三国志'},
 ])
 console.log(games)
 function changeFirstGame(){
  games.value[0].name+="!"
  console.log(games)
 }

</script>

<style lang="scss" scoped>

</style>